<template>
  <div class="screen-container home-echarts">
    <header class="screen-header">
      <div>
        <img src="" alt="">
      </div>
      <span class="logo">
        <img src="" alt="">
      </span>
      <span class="title">快递系统监控平台</span>
      <div class="title-right">
        <img src="" alt="">
        <span class="datatime">2021-01-01 00:00:00</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top">
          <temp1-echarts></temp1-echarts>
        </div>
        <div id="left-bottom">
          <branch-echarts></branch-echarts>
        </div>
        
      </section>
      <section class="screen-middle">
        <div id="middle-top">
          <map-echarts></map-echarts>
        </div>
        <div id="middle-bottom">
          网点工单整改的统计
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top">
          热门问题
        </div>
        <div id="right-bottom">
          问题总量与整改率的统计
        </div>
      </section>

    </div>



    <!-- <branch-echarts></branch-echarts> -->
    <!-- <temp1-echarts></temp1-echarts> -->
    <!-- <map-echarts></map-echarts> -->
  </div>
</template>

<script>
import BranchEcharts from './components/BranchEcharts'
import Temp1Echarts from './components/Temp1Echarts'
import MapEcharts from './components/MapEcharts'

export default {
  name: '',
  components: {
    BranchEcharts,
    Temp1Echarts,
    MapEcharts,
  },
  data(){
    return{

    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},

  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  .div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute
  }
}
</style>